<template>
  <div>
     <MyHeader background="pink" :color="'#222'" title="购物车"></MyHeader>
     <div class="mar">
      <component :is="name1" >
        <keep-alive>
        <MyGoodsList></MyGoodsList>
      <MyGoodsSearch ></MyGoodsSearch>
      <MyUserInfo></MyUserInfo>
    </keep-alive>
      </component>
      
     </div>
     <MyTobbar :arr="tabList" @chage="btn11"></MyTobbar>
   </div>
</template>
 
<script>
  import MyHeader from './assets/MyHeader.vue'
  import MyTable from './assets/MyTable.vue'
  import MyTobbar from './assets/MyTobbar.vue'
  import  MyGoodsList from './components/MyGoodslist.vue'
  import  MyGoodsSearch from './components/MyGodsSearch.vue'
  import  MyUserInfo from './components/MyUserinfo.vue'
export default {
  name: "",
  components: {
    MyTobbar,
    MyTable,
    MyHeader,
    MyUserInfo,
    MyGoodsSearch,
    MyGoodsList
  },
  props: {},
  data() {
    return {
      tabList: [
    {
        iconText: "icon-shangpinliebiao",
        text: "商品列表",
        componentName: "MyGoodsList"
    },
    {
        iconText: "icon-sousuo",
        text: "商品搜索",
        componentName: "MyGoodsSearch"
    },
    {
        iconText: "icon-user",
        text: "我的信息",
        componentName: "MyUserInfo"
    },
],
name1:MyGoodsList,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    btn11(a){
      this.name1 = a
    }
  }
};
</script>

<style scoped>
     .mar{
      margin-top: 45px;
      margin-bottom: 51px;
     }
</style>